<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<div class="row">
	<div class="col-xs-12">
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">
					Demo列表
				</div>
				<div>
					<table id="demoListTable" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
									<th>
										<label class="pos-rel">
											<input type="checkbox" class="ace" id="demoCheckbox"/>
											<span class="lbl"></span>
										</label>
									</th>
								
									<th>demoid</th>
									<th>DEMONAME</th>
									<th>demourl</th>
									<th>demoorg</th>
									<th>demodept</th>
									<th>demouser</th>
									<th>demostatus</th>
									<th>demopic</th>
									<th>demofile</th>
									<th>demodate</th>
									<th>remark</th>
									<th>操作</th>
							</tr>
						</thead>
						<tbody>
						   <tr><td colspan="8" align="center">数据加载中...</td></tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">


var scripts = [null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	
	$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
		_title: function(title) {
			var $title = this.options.title || '&nbsp;'
			if( ("title_html" in this.options) && this.options.title_html == true )
				title.html($title);
			else title.text($title);
		}
	}));   
});



var dataTables;		
$(function(){
	dataTables = $("#demoListTable").dataTable({
				"bProcessing": true,
				"bServerSide": true,
				"bDestroy":true,
				"bSort": false,
				"bFilter": false,
				"bAutoWidth": false,
				"sPaginationType": "full_numbers",
				"oLanguage" : oLanguage,
				"fnServerParams": function ( aoData ) {
						aoData.push( { "name": "demoid", "value": "${demo.demoid}" } );
						aoData.push( { "name": "demoname", "value": "${demo.demoname}" } );
						aoData.push( { "name": "demourl", "value": "${demo.demourl}" } );
						aoData.push( { "name": "demoorg", "value": "${demo.demoorg}" } );
						aoData.push( { "name": "demodept", "value": "${demo.demodept}" } );
						aoData.push( { "name": "demouser", "value": "${demo.demouser}" } );
						aoData.push( { "name": "demostatus", "value": "${demo.demostatus}" } );
						aoData.push( { "name": "demopic", "value": "${demo.demopic}" } );
						aoData.push( { "name": "demofile", "value": "${demo.demofile}" } );
						aoData.push( { "name": "demodate", "value": "${demo.demodate}" } );
						aoData.push( { "name": "remark", "value": "${demo.remark}" } );
				},
				"sAjaxSource": "${rc.contextPath}/demo/ajaxList.do",
				"fnServerData": fnDataTablesPipeline,
				"sServerMethod": "POST"
			});
		
		var active_class1 = 'active';
		$('#demoCheckbox').on('click', function(){
			var th_checked = this.checked;
			$(this).closest('table').find('tbody > tr').each(function(){
				var row = this;
				if(th_checked) $(row).addClass(active_class1).find('input[type=checkbox]').eq(0).prop('checked', true);
				else $(row).removeClass(active_class1).find('input[type=checkbox]').eq(0).prop('checked', false);
			});
		});
		
		
		//点击行变色
		var active_class2 = 'success';
		$('#demoListTable').on('click', 'tbody tr' , function(){
			var $row = $(this).closest('tr');	
			if ($row.hasClass(active_class2) == false) {
				dataTables.$('tr.' + active_class2).removeClass(active_class2);
				$row.addClass(active_class2);				
			}
		});
		
		/* $('#demoListTable').on('click', 'tbody tr' , function(){
			var aData = dataTables.fnGetData(this); 
			if (aData == null) {
				return;
			} 
			alert(aData);
		});	 */
		
		
	});




</script>